<%
	request.setCharacterEncoding("UTF-8");
%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="viewport" content="width=800">
	<title>결혼식에 초대합니다.</title>
	<style>
		@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
		@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
		@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
		@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
		@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
		
		.nanum-g { font-family: 'Nanum Gothic'; }
		.nanum-b { font-family: 'Nanum Brush Script'; }
		.nanum-gc { font-family: 'Nanum Gothic Coding'; }
		.nanum-m { font-family: 'Nanum Myeongjo';  }
		.nanum-p { font-family: 'Nanum Pen Script'; }
		
		html, body, * {
			margin: 0px;
			padding: 0px;
		}
		
		#page, #page div, #page img {
			width: 800px;
		}
		
		.insamal {
			margin: 100px 0px 100px 0px;
			text-align: center;
			color: white;
			font-size: 40pt;
		}
		
		.contact {
			margin: 100px 0px 30px 0px;
			text-align: left;
			color: white;
			font-size: 40pt;
		}
		
		.trafic .subject {
			color: white;
			font-size: 30pt;
		}
		
		.trafic .desc {
			color: white;
			font-size: 28pt;
			margin-bottom: 30px;
		}
		
		.trafic .wrap-first {
			padding-left: 30px;
		}
		.trafic .wrap-first2 {
			padding-left: 42px;
		}
		ul {
			list-style: none;
		}
		ul, li {
			display: inline;
		}
		
		#page img.call, #page img.map-detail {
			width: 48px;
			height: 48px;
			vertical-align: middle;
		}
		
		.contact a {
			text-decoration: none;
			color: white;
			font-size: 30pt;
		}
		
		.function a {
			text-decoration: none;
			color: white;
			font-size: 30pt;
		}
		
		.function ul li {
			margin-right: 30px;
		}
		
		.epilogue-text {
			top: 4120px;
			left: 80px;
			position: absolute;
			font-size: 55px;
		}

        .comment {
            font-size:40px;
            color: white;
        }

        #commentList td {
            padding: 5px;
            color: white;
            font-size: 25px;
        }

        #commentList td.regDt {
            text-align: right;
        }

        .deletePannel span.item {
            padding-left: 15px;
        }
	</style>
    <script type="text/javascript" src="resources/js/jquery-1.11.0.min.js"></script>
    <script tyep="text/javascript">
        function goDetailMap() {
            var url = "http://map.naver.com/?lng=127.0939766&lat=35.8418292&dlevel=12&mapmode=0&pinId=13086190&pinType=site&enc=b64";
            window.open(url, "mapWindow");
        }

        function isMobile() {
            //return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform)));
            return (/Android|webOS|iPhone|BlackBerry/i.test(navigator.userAgent) || (/Android|webOS|iPhone|BlackBerry/i.test(navigator.platform)));
        }

        function calling(number) {
            if (isMobile())
                location.replace("tel:"+number);
        }

        function clearComment() {
            $(".comment input[name='commentId']").val("");
            $(".comment textarea[name='commentText']").val("");
            $(".comment input[name='commentPw']").val("");
        }

        function saveComment(){
            var commentId = $(".comment input[name='commentId']").val();
            var commentText = $(".comment textarea[name='commentText']").val();
            var commentPw = $(".comment input[name='commentPw']").val();

            if(commentId == null || commentId.length == 0 || commentId == "<이름입력>") {
                alert("이름을 입력해주세요.^^");
                $(".comment input[name='commentId']").focus();
                return;
            }

            if(commentText == null || commentText.length == 0 || commentText == "(소중한 한 줄을 남겨주세요~)") {
                alert("소중한 한 줄을 입력해주세요.^^");
                $(".comment input[name='commentText']").focus();
                return;
            }

            if(commentPw == null || commentPw.length == 0) {
                alert("암호를 입력해주세요.^^");
                $(".comment input[name='commentPw']").focus();
                return;
            }

            $.ajax({
                url: "saveComment.jsp",
                type: "POST",
                async: false,
                data: {
                    commentId: commentId,
                    commentText: commentText,
                    commentPw: commentPw
                },
                complete: function(request, status) {
                    if(status == "success") {
                        alert("소중한 글을 남겨주셔서 감사해요. ㅠㅠ");
                    } else {
                        alert("오류가 났어요..ㅠㅠ 잘 올라갔는지 확인해보세요 흑흑..");
                    }
                    clearComment();
                    listComment();
                }
            });
        }

        function listComment() {
            $.ajax({
                url: "listComment.jsp",
                type: "POST",
                async: false,
                data: {
                },
                complete: function(request, status) {
                    if(status == "success") {
                        //alert(request.responseText);
                        $("#commentList").html(request.responseText);
                        bindDelete();
                    } else {
                        alert("댓글을 가져오지 못했어요 ㅠㅠ");
                    }
                }
            });
        }

        function bindDelete(){
            $("#commentList .deletePannel").hide();

            $("#commentList .submitCancel").click(function(){
                $(this).parent(".deletePannel").hide();
                $(this).parent().parent().children(".text").show();
            }).mouseover(function(){
                $(this).css("text-decoration", "underline");
            }).mouseout(function(){
                $(this).css("text-decoration", "");
            }).css("cursor", "pointer");

            $("#commentList .submitDelete").click(function(){
                var objId = $(this).parent().parent().children("input[name='objId']").val();
                var commentPw = $(this).parent().find("input[name='commentPw']").val();

                $.ajax({
                    url: "deleteComment.jsp",
                    type: "POST",
                    async: false,
                    data: {
                        "objId": objId,
                        "commentPw": commentPw
                    },
                    complete: function(request, status) {
                        if(status == "success") {
                            alert("삭제되었어요~");
                        }  else {
                            alert("오류가 났어요 ㅠㅠ 암호를 확인해주세요~");
                        }
                        listComment();
                    }
                });
            }).mouseover(function(){
                $(this).css({
                    "text-decoration": "underline"
                });
            }).mouseout(function(){
                $(this).css({
                    "text-decoration":""
                });
            }).css("cursor", "pointer");

            $("#commentList .delete").click(function(){
                var objId = $(this).next("[name='objId']").val();
                $(this).next().next().show();
                $(this).parent().children(".text").hide();

            }).css("cursor", "pointer");
        }

        $(document).ready(function(){
            listComment();
            $(".comment input[name='commentId']").focus(function(){
                var value = $(this).val();
                if("<이름입력>" == value) {
                    $(this).val("");
                }
            }).blur(function(){
                var value = $(this).val();
                if(value == "") {
                    $(this).val("<이름입력>");
                }
            });

            $(".comment textarea[name='commentText']").focus(function(){
                var value = $(this).val();
                if("(소중한 한 줄을 남겨주세요~)" == value) {
                    $(this).val("");
                }
            }).blur(function(){
                var value = $(this).val();
                if(value == "") {
                    $(this).val("(소중한 한 줄을 남겨주세요~)");
                }
            });
        });
    </script>
</head>
<body>
	<div id="page">
		<div style="padding: 20px;background-color: #663300">
			<img src="resources/images/intro.png" border="0" />
			
			<div class="insamal nanum-b">
				모든 것이 새로워지는 봄 날,<br/>
				사랑하는 두 사람이<br/>
				새 인생을 시작하려 합니다.<br/>
				바쁘시더라도 와 주셔서<br/>
				두 사람의 결혼을 축복해주시고<br/>
				따뜻한 마음으로 격려해주신다면<br/>
				큰 힘이 되겠습니다.
			</div>
			<div>
				<img src="resources/images/wedding_photo_1.jpg" border="0" />
				<img src="resources/images/wedding_photo_2.jpg" border="0" />
			</div>
			<div class="contact nanum-b">
				&lt;찾아오시는 길&gt;&nbsp;&nbsp;
				<a href="javascript:goDetailMap();"><img class="map-detail nanum-b" alt="상세지도보기" src="resources/images/map_location.png" /> 상세지도</a>
			</div>
			
			<div style="float:left;width:450px;">
				<img class="map" src="resources/images/map.png" style="width:450px;height:580px" border="0" />
			</div>
			<div class="trafic nanum-b" style="float:right;width:330px;">
				<p class="subject">•승용차</p>
				<p class="desc">
				 - 전주IC : 서부우회도로(15분)<br/>
				 - 효자,삼천동 : 백제로(10분)<br/>
				 - 기린/팔달로 : 백제로(9분)</p>
				<p class="subject">•버스</p>
				<p class="desc">
				 - 시내버스노선 : 1, 2, 61, <br/><span class="wrap-first">72</span>, 105, 190, 309<br/>
				 - 고속/시외버스터미널(택시<br/><span class="wrap-first">6분)</span>, 전주역(택시 13분)</p>
				<p class="desc">※ 고속버스 이용 시, 월드컵<span class="wrap-first2">경기장에서</span> 하차하시는 <span class="wrap-first2">것이</span> 편리합니다.</p>
			</div>
			<div class="function" style="clear:both;margin-top: 100px;margin-bottom:100px;">
				<ul>
					<li><a href="javascript:calling('01036725605')" class="nanum-b" style="margin-right:115px"><img class="call" alt="신랑전화" src="resources/images/phone_red.png" />신랑전화</a></li>
					<li><a href="javascript:calling('01064867507')" class="nanum-b"><img class="call" alt="신부전화" src="resources/images/phone_red.png" />신부전화</a></li>
				</ul>
			</div>
			<%
			long currentTime = System.currentTimeMillis();
			String randomValue = String.valueOf(currentTime);
			String value = randomValue.substring(randomValue.length() - 1, randomValue.length());
			int last = Integer.valueOf(value);
			String imageIndex = "1";
			if(last >= 0 && last < 2) {
				imageIndex = "1";
			} else if(last >= 2 && last < 5) {
				imageIndex = "2";
			} else if(last >= 5 && last < 7) {
				imageIndex = "3";
			} else {
				imageIndex = "4";
			}
			%>
			<p class="epilogue-text nanum-b">바쁘시더라도 <br/>와 주셔서<br/>축하해주세요~<br/>행복하게<br/>잘 살겠습니다.^^<br/>- 성대, 지영 -</p>			
			<div class="epilogue">
				<img src="resources/images/epilogue<%=imageIndex %>.jpg" alt="잘살겠습니다." border="0" />
			</div>

            <div class="comment" style="margin-top:80px; margin-bottom: 40px;">
                <div class="nanum-b" style="margin-bottom: 20px;">&lt;남기고 싶은 말&gt;&nbsp;&nbsp;</div>
                <table width="100%">
                <colgroup>
                    <col width="80px" />
                    <col width="365px" />
                    <col width="80px" />
                    <col width="" />
                    <col width="80px" />
                </colgroup>
                <tr>
                    <th class="nanum-b" style="color:white;font-size: 40px;">이름</th>
                    <td><input type="text" name="commentId" value="<이름입력>" style="width: 150px;padding:5px;font-size:25px;" /></td>
                    <th class="nanum-b" style="color:white;font-size: 40px;">암호</th>
                    <td><input type="password" name="commentPw" value="" maxlength="4" style="width: 150px;padding: 5px;font-size:25px;" /></td>
                    <td rowspan="2" style="text-align: center;"><input type="button" style="font-size:25px;float:right;" value="완료" onclick="saveComment()" /></td>
                </tr>
                <tr>
                    <th class="nanum-b" style="color:white;font-size: 40px;">댓글</th>
                    <td colspan="3"><textarea name="commentText" style="width:600px;padding:5px;font-size:25px;" rows="1">(소중한 한 줄을 남겨주세요~)</textarea></td>
                </tr>
                </table>
            </div>

            <table width="100%" style="border-top: 1px solid white;">
            <colgroup>
                <col width="150" />
                <col width="" />
                <col width="200" />
            </colgroup>
            <tbody id="commentList">
            </tbody>
            </table>
            <div style="height:100px;">&nbsp;</div>
		</div>
	</div>
</body>
</html>
